<!-- 修改费用 -->
<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="submitFn"
    title="修改费用"
    class="modal-dialog-wrapper"
    :mask-closable="false"
    width="65vw"
  >
    <div class="mains-tlt">
      <div></div>
      <div>违章内容</div>
    </div>
    <page-form :model="form" layout="vertical" ref="formRef" class="page-form">
      <div class="mains">
        <page-form-row>
          <page-form-item
            v-for="(item, index) in form.feeList"
            :key="item.id"
            :label="item.itemName"
            size="1/2"
            :field="`feeList[${index}].amount`"
            :rules="[{ required: item.itemName == '罚款' ? true : false, message: '请输入' }]"
          >
            <a-input-number
              :max="99999999.99"
              :min="0"
              placeholder="请输入"
              v-model="item.amount"
              @blur="count()"
              hide-button
              :precision="2"
              :max-length="10"
            >
              <template #suffix> 元 </template>
            </a-input-number>
          </page-form-item>
        </page-form-row>
        <div class="mains-line"></div>
        <div class="all-count">
          <text>合计：</text>
          <span>{{ maintenanceAmount ? maintenanceAmount : '0' }}元</span>
        </div>
      </div>
    </page-form>

    <template #footer>
      <a-space>
        <a-button @click="() => (showModal = false)">关闭</a-button>
        <a-button type="primary" @click="submitFn" :loading="submitLoading">确认</a-button>
      </a-space>
    </template>
    <mains ref="maintenance" :type="1" />
  </a-modal>
</template>

<script setup name="CarMaintenanceEditFees" lang="ts">
  import { Message } from '@arco-design/web-vue'
  import { ref } from 'vue'
  import { getViolationFeeInfo, getViolationFeeEdit } from '@/api/finance/costConfirm'
  const showModal = ref(false)
  const submitLoading = ref(false)
  const formRef = ref()
  const details = ref<any>()
  const form = ref<any>({
    feeList: [
      {
        itemName: '罚款',
        amount: undefined,
      },
      {
        itemName: '代办费用',
        amount: undefined,
      },
      {
        itemName: '违章代办真实成本',
        amount: undefined,
      },
    ],
  })

  const show = (id, record) => {
    console.log('record', record)

    details.value = record
    showModal.value = true
    form.value.id = id

    if (id) {
      getDetail()
    }
  }

  const getDetail = () => {
    getViolationFeeInfo({ id: form.value.id }).then((res) => {
      const result = res.result
      console.log('result', result)

      if (result.feeNameId == 55) {
        form.value.feeList = form.value.feeList.slice(0, 2)

        result.feeDetailList.forEach((item) => {
          form.value.feeList.forEach((item2) => {
            if (item.itemName == item2.itemName) {
              item2.amount = item.amount
            }
          })
        })
      } else if (result.feeNameId == 551) {
        form.value.feeList = form.value.feeList.slice(-1)

        form.value.feeList[0].amount = result.feeDetailList[0].amount
      }

      count()
    })
  }

  // 计算价格
  const maintenanceAmount = ref(0)
  const count = () => {
    maintenanceAmount.value = 0

    for (let i = 0; i < form.value.feeList.length; i++) {
      if (form.value.feeList[i].amount == undefined) {
        continue
      }

      maintenanceAmount.value += form.value.feeList[i].amount
    }
  }

  const emit = defineEmits(['feepageConfirm'])

  const onClose = () => {
    maintenanceAmount.value = 0
    form.value = {
      feeList: [
        {
          itemName: '罚款',
          amount: undefined,
        },
        {
          itemName: '代办费用',
          amount: undefined,
        },
        {
          itemName: '违章代办真实成本',
          amount: undefined,
        },
      ],
    }
  }
  const submitFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        submitLoading.value = true

        getViolationFeeEdit({ ...form.value })
          .then((res) => {
            emit('feepageConfirm')
            if (res.code == 200) {
              Message.success(res.message)
              showModal.value = false
            }
          })
          .finally(() => {
            submitLoading.value = false
          })
      }
    })
  }
  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .mains-tlt {
    font-size: 14px;
    color: #1d2129;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;
    div:nth-child(1) {
      width: 3px;
      height: 16px;
      background-color: #165dff;
    }
    div:nth-child(2) {
      color: #1d2129;
      font-size: 14px;
      font-weight: 500;
      margin: 0 16px 0 8px;
    }
    .choose-mains {
      display: inline-block;
      padding: 5px 16px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      background: #1890ff;
      border-radius: 2px;
    }
  }
  .mains {
    position: relative;
    width: 100%;
    // background-color: rgba(247, 248, 250, 0.5);
    padding: 20px;

    .mains-items {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .mains-item {
        margin-top: 10px;
        margin-right: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px 8px;
        border: 1px solid #e5e6eb;
        border-radius: 2px;
      }
    }
    .mains-form-items {
      width: 100%;
      .mains-form-item {
        width: 100%;
        .mains-form-tlt {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .mains-form-tlt-name {
            color: var(--color-text-1);
            font-weight: 500;
          }
          .main-icon {
            margin-left: 22px;
            cursor: pointer;
          }
        }
        .mains-form-in {
          width: 100%;
          margin-top: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // .mains-form-initem {
          //   width: 20%;
          //   margin-right: 10px;
          //   display: flex;
          //   flex-direction: column;
          //   justify-content: flex-start;
          //   align-items: flex-start;
          // }
          .mains-form-in-c {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
        .mains-line {
          width: 100%;
          height: 1px;
          background-color: #f2f3f5;
          margin: 20px 0;
        }
      }
    }
  }
  .operate-btn {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
    user-select: none;
    padding: 0 5px;
    icon {
      margin-right: 8px;
    }
    &.del {
      color: #ea0000;
    }
    &.new {
      color: #165dff;
    }
  }
  .box {
    width: 200px;
    height: 40px;
    border: 1px solid wheat;
  }
  .box:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search {
    display: flex;
    margin-bottom: 20px;
  }
  .quick-search-item {
    width: 16%;
    height: 62px;
    padding: 9px 0 9px 16px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #e5e8ef;
  }
  .quick-search-item:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search-item-checked {
    background: #e8f3ff;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #1890ff;
  }
  .quick-search-item:nth-of-type(n + 2) {
    margin-left: 20px;
  }
  .quick-search-item-label {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #4e5969;
  }
  .quick-search-item-value {
    font-size: 20px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #1d2129;
  }
  .quick-search-item-value-checked {
    color: #1890ff;
  }
  :deep(.arco-table-expand-btn) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  :deep(.arco-table-expand-btn:hover) {
    width: 20px;
    height: 20px;
    background-color: inherit;
  }
  .second-stage {
    width: 200px;
    margin-left: 260px;
  }
  .third-stage {
    width: 200px;
    margin-left: 30px;
  }
  .page-form {
    margin: 0;
    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
  .mains-line {
    width: 100%;
    height: 1px;
    background-color: #f2f3f5;
  }
  .all-count {
    width: 100%;
    text-align: right;
    color: var(--color-text-1);
    font-size: 14px;
    margin-top: 12px;
    span {
      color: #165dff;
      font-size: 18px;
      font-weight: 600;
    }
  }
</style>
